'use strict'
import React from 'react';
import {Image, Dimensions, Text, View, StyleSheet} from 'react-native'
import Carousel from 'react-native-looped-carousel';

const { width } = Dimensions.get('window');
const height = 170;

export default class MyCarousel extends React.Component {
  constructor (props) {
    super(props);
  }
  _renderList (images) {
    var list = [];
    for (let i = 0; i < images.length; i++)
      list.push(
        this._renderView(images[i], i)
      );
    return list;
  }

  _renderView (img, key) {
    return (
        <View key={key} style={{width, height:  height}}>
          <Image source={{uri: img}} style={{width, height:  height}}/>
        </View>
    );
  }

  render () {
    let images = this.props.imgs;
    return (
      <View style={[{height: height}, this.props.style]}>
          <Carousel
            delay={3000}
            style={{width, height:  height}}
            autoplay
            bullets
            onAnimateNextPage={(p) => console.log(p)}
          >
          {this._renderList(images)}
          </Carousel>
        </View>
    );
  }
}

const styles = StyleSheet.create({

});